<template>
  <div class="Favorite">
    <!-- 头部 -->
    <van-nav-bar title="收藏列表">
      <template #left>
        <van-icon name="arrow-left" class="iconFont" @click="$router.back()" />
      </template>
    </van-nav-bar>

    <!-- 收藏列表 -->
    <div class="FavoriteList">
      <div
        class="ListItem"
        v-for="(item, index) in FavoriteList"
        :key="index"
        @click="OnHouse(item.houseCode)"
      >
        <div class="ItemL">
          <img :src="'http://liufusong.top:8080' + item.houseImg" alt="" />
        </div>
        <div class="ItemR">
          <h3 class="HouseItem_title">{{ item.title }}</h3>
          <p class="HouseItem_desc">{{ item.desc }}</p>
          <p
            class="HouseItem_tag"
            v-for="(item, index) in item.tags"
            :key="index"
          >
            {{ item }}
          </p>

          <p class="HouseItem_price">
            <strong class="HouseItem_priceNum">{{ item.price }}</strong
            >元/月
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import { setUserFavorite } from '@/api/user.js'
// import { Toast } from 'vant'
import { createNamespacedHelpers } from 'vuex'
const { mapState: mapFavoriteState, mapActions: mapFavoriteActions } =
  createNamespacedHelpers('FavoriteList')

export default {
  name: 'Favorite',
  data () {
    return {}
  },

  created () {
    this.getFavorite()
  },
  computed: {
    ...mapFavoriteState(['FavoriteList'])
  },

  methods: {
    ...mapFavoriteActions(['getFavorite']),
    // async setFavorite () {
    //   const loading = Toast.loading({
    //     message: '加载中...',
    //     forbidClick: true,
    //     duration: 0 // 持续展示 toast
    //   })
    //   try {
    //     const res = await setUserFavorite()
    //     console.log(res)
    //     this.FavoriteList = res.data.body
    //     loading.clear()
    //   } catch (error) {
    //     Toast('收藏列表请求失败！')
    //   }
    // },
    OnHouse (e) {
      this.$router.push('/detail/' + e)
    }
  }
}
</script>

<style scoped lang="less">
* {
  margin: 0;
  padding: 0;
}
.Favorite {
  .van-nav-bar {
    background-color: #21b97a;
    /deep/.van-nav-bar__title {
      font-size: 18px;
      color: #fff;
    }
    .iconFont {
      color: #fff;
      font-size: 18px;
    }
  }
  .FavoriteList {
    .ListItem {
      display: flex;
      width: 375px;
      height: 120px;
      padding-top: 18px;
      box-sizing: border-box;
      // justify-content: space-around;
      /* padding-top: 18px; */
      border-bottom: 1px solid #e5e5e5;
      // position: relative;
      .ItemL {
        img {
          width: 106px;
          height: 80px;
        }
      }
      .ItemR {
        overflow: hidden;
        line-height: 22px;
        padding-left: 12px;
        .HouseItem_title {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          vertical-align: middle;
          margin: 0;
          font-size: 15px;
          color: #394043;
        }
        .HouseItem_desc {
          font-size: 12px;
          color: #afb2b3;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          vertical-align: middle;
        }
        .HouseItem_tag {
          display: inline-block;
          font-size: 12px;
          border-radius: 3px;
          padding: 4px 5px;
          margin-right: 5px;
          line-height: 12px;
          color: #39becd;
          background: #e1f5f8;
        }
        .HouseItem_price {
          font-size: 12px;
          color: #fa5741;
          .HouseItem_priceNum {
            font-size: 16px;
            font-weight: bolder;
          }
        }
      }
    }
  }
}
</style>
